<template>
  <div class="add_enterprise">
    <el-form
      disabled
      label-width="150px"
      class="demo-ruleForm"
      :inline="true"
      label-position="right"
    >
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="clearfixText">照片信息</span>
        </div>
        <el-form-item prop="businessLicenseImg" class="picture_style">
          <el-image
            :src="enterpriseDetail.businessLicenseImg"
            style="width: 160px; height: 160px"
            :preview-src-list="enterpriseDetailImgList"
          />
          <p class="picture_label">
            营业执照
          </p>
        </el-form-item>
        <el-form-item prop="transportLicenseImg" class="picture_style">
          <el-image
            :src="enterpriseDetail.transportLicenseImg"
            style="width: 160px; height: 160px"
            :preview-src-list="enterpriseDetailImgList"
          />
          <p class="picture_label">
            道路运输许可证
          </p>
        </el-form-item>
        <el-form-item prop="frontImg" class="picture_style">
          <el-image
            :src="enterpriseDetail.frontImg"
            style="width: 160px; height: 160px"
            :preview-src-list="enterpriseDetailImgList"
          />
          <p class="picture_label">
            法人身份证（正面）
          </p>
        </el-form-item>
        <el-form-item prop="backImg" class="picture_style">
          <el-image
            :src="enterpriseDetail.backImg"
            style="width: 160px; height: 160px"
            :preview-src-list="enterpriseDetailImgList"
          />
          <p class="picture_label">
            法人身份证（反面）
          </p>
        </el-form-item>
      </el-card>
      <el-card class="box-card text_form">
        <div slot="header" class="clearfix">
          <span class="clearfixText">基本信息</span>
        </div>
        <el-form-item label="公司全称" prop="name">
          <el-input v-model="enterpriseDetail.name" />
        </el-form-item>
        <el-form-item label="统一社会信用代码" prop="creditCode">
          <el-input v-model="enterpriseDetail.creditCode" />
        </el-form-item>
        <el-form-item label="公司法人" prop="legalPerson">
          <el-input v-model="enterpriseDetail.legalPerson" />
        </el-form-item>

        <el-form-item label="营业执照有效期" prop="enterpriseDetail.businessLicensePeriod">
          <el-date-picker
            v-model="enterpriseDetail.businessLicensePeriod"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="道路运输许可证号" prop="transportLicenseNo">
          <el-input
            v-model="enterpriseDetail.transportLicenseNo"
            type="text"
            placeholder="请输入内容"
            maxlength="18"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="营业执照有效期类型" prop="businessLicenseType">
          <el-input
            v-model="enterpriseDetail.businessLicenseType"
            type="text"
            placeholder="请输入内容"
            maxlength="18"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="法人证件类型" prop="documentType">
          <el-select v-model="enterpriseDetail.documentType" placeholder="请选择">
            <el-option
              v-for="item in legalPersonLicenseTypeSelector"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="法人证件号码" prop="legalPersonIdCard">
          <el-input
            v-model="enterpriseDetail.legalPersonIdCard"
            type="text"
            placeholder="请输入内容"
            maxlength="18"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="法人证件有效期" prop="legalPersonIdCardPeriod">
          <el-date-picker
            v-model="enterpriseDetail.legalPersonIdCardPeriod"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="法人手机号" prop="legalPersonMobile">
          <el-input
            v-model="enterpriseDetail.legalPersonMobile"
            type="text"
            placeholder="请输入内容"
            maxlength="11"
            show-word-limit
          />
        </el-form-item>
      </el-card>
      <el-card class="box-card text_form">
        <div slot="header" class="clearfix">
          <span class="clearfixText">开通账号信息</span>
        </div>
        <el-form-item label="绑定手机号归属" prop="bindingMobileAffiliation">
          <el-select v-model="enterpriseDetail.bindingMobileAffiliation" placeholder="请选择">
            <el-option
              v-for="item in bindingMobileAffiliationSelector"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="联系人姓名" prop="contactName">
          <el-input v-model="enterpriseDetail.contactName" />
        </el-form-item>
        <el-form-item label="绑定手机号" prop="bindingMobile">
          <el-input v-model="enterpriseDetail.bindingMobile" />
        </el-form-item>
        <el-form-item label="绑定邮箱" prop="bindingMailbox">
          <el-input v-model="enterpriseDetail.bindingMailbox" />
        </el-form-item>
        <el-form-item label="合同有效期" prop="contractPeriod">
          <el-date-picker
            v-model="enterpriseDetail.contractPeriod"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />
        </el-form-item>
        <el-form-item label="是否需要开票" prop="isInvoice">
          <el-select v-model="enterpriseDetail.isInvoice" placeholder="请选择">
            <el-option
              v-for="item in needInvoiceSelector"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="开票公司" prop="invoiceCompanyId">
          <el-select v-model="enterpriseDetail.invoiceCompanyId" placeholder="请选择">
            <el-option
              v-for="item in InvoiceCompanySelector"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </el-card>
      <el-card class="box-card text_form">
        <div slot="header" class="clearfix">
          <span class="clearfixText">开户信息</span>
        </div>
        <el-form-item label="开户账号" prop="bankAccount">
          <el-input v-model="enterpriseDetail.bankAccount" />
        </el-form-item>
        <el-form-item label="开户银行" prop="bank">
          <el-input v-model="enterpriseDetail.bank" />
        </el-form-item>
        <el-form-item label="开户支行" prop="bankBranch">
          <el-input v-model="enterpriseDetail.bankBranch" />
        </el-form-item>
      </el-card>
      <el-card class="box-card text_form">
        <div slot="header" class="clearfix">
          <span class="clearfixText">发票信息</span>
        </div>
        <el-form-item label="注册电话" prop="registerMobile">
          <el-input
            v-model="enterpriseDetail.registerMobile"
            type="text"
            placeholder="支持座机和手机格式"
            maxlength="13"
            show-word-limit
          />
        </el-form-item>
        <el-form-item label="开票费率" prop="invoiceRate">
          <el-input v-model="enterpriseDetail.invoiceRate" />
        </el-form-item>
        <el-form-item label="公司注册地址省市区" prop="registerPrecinct">
          <el-input
            v-model="enterpriseDetail.registerPrecinct"
            type="text"
          />
        </el-form-item>
        <el-form-item label="公司注册详细地址" prop="registerAddress">
          <el-input v-model="enterpriseDetail.registerAddress" />
        </el-form-item>
      </el-card>
    </el-form>
    <div class="enterpriseBtn">
      <el-button v-if="enterpriseDetail.status === 'PENDING' " type="primary" size="medium" @click="handleAudit">审核通过</el-button>
    </div>
  </div>
</template>

<script>
import {
  getEnterpriseById, auditEnterpriseAccountStatus
} from '@/api/tms/enterprise.js'
import * as R from 'ramda'
export default {
  data() {
    return {
      imgBaseUrl: process.env.VUE_APP_OSS_DOWN,
      enterpriseDetail: {},
      enterpriseDetailImgList: [],
      needInvoiceSelector: [{ label: '开票', value: 'true' }, { label: '不开票', value: 'false' }],
      legalPersonLicenseTypeSelector: [{ label: '身份证', value: 'IDCARD' }, { label: '护照', value: 'PASSPORT' }],
      bindingMobileAffiliationSelector: [{ label: '法人', value: 'LEGAL_PERSON' }, { label: '联系人', value: 'CONCAT_PERSON' }],
      InvoiceCompanySelector: [{ label: '山西', value: '1' }]
    }
  },
  created() {
    const businessLicenseTypeMapping = {
      PERMANENT: '永久有效',
      LONG_TERM: '长期有效',
      NO_FIXED: '无固定日期'
    }
    const businessLicensePeriod = []
    const legalPersonIdCardPeriod = []
    const contractPeriod = []
    const registerPrecinct = []
    const id = this.$route.params.id
    getEnterpriseById(id).then((response) => {
      this.enterpriseDetail = response
      this.enterpriseDetail.businessLicenseImg = this.imgBaseUrl + response.businessLicenseImg
      this.enterpriseDetail.transportLicenseImg = this.imgBaseUrl + response.transportLicenseImg
      this.enterpriseDetail.frontImg = this.imgBaseUrl + response.frontImg
      this.enterpriseDetail.backImg = this.imgBaseUrl + response.backImg
      this.enterpriseDetail.businessLicenseType = businessLicenseTypeMapping[response.businessLicenseType]
      businessLicensePeriod.push(response.businessLicenseStartTime)
      businessLicensePeriod.push(response.businessLicenseEndTime)
      legalPersonIdCardPeriod.push(response.usefulStartTime)
      legalPersonIdCardPeriod.push(response.usefulEndTime)
      contractPeriod.push(response.contractStartTime)
      contractPeriod.push(response.contractEndTime)
      registerPrecinct.push(response.registerProvince)
      registerPrecinct.push(response.registerCity)
      registerPrecinct.push(response.registerDistrict)
      this.enterpriseDetail.businessLicensePeriod = businessLicensePeriod
      this.enterpriseDetail.legalPersonIdCardPeriod = legalPersonIdCardPeriod
      this.enterpriseDetail.contractPeriod = contractPeriod
      this.enterpriseDetail.registerPrecinct = R.join('/', registerPrecinct)
      /** images list **/
      this.enterpriseDetailImgList.push(this.enterpriseDetail.businessLicenseImg)
      this.enterpriseDetailImgList.push(this.enterpriseDetail.transportLicenseImg)
      this.enterpriseDetailImgList.push(this.enterpriseDetail.frontImg)
      this.enterpriseDetailImgList.push(this.enterpriseDetail.backImg)
    })
  },
  methods: {
    handleAudit() {
      auditEnterpriseAccountStatus(this.enterpriseDetail.id).then((response) => {
        this.$notify({
          title: '成功',
          message: '审核成功',
          type: 'success',
          duration: 2000
        })
        this.enterpriseDetail.status = 'SUCCESS'
      })
    }
  }
}

</script>

<style lang='scss'>
.add_enterprise {
  .demo-ruleForm {
    width: 100%;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    .picture_style {
      margin-left: 30px;
      .picture_label {
        text-align: center;
        i {
          color: red;
          margin-right: 5px;
        }
      }
    }
    .text_form {
      .el-form-item {
        margin-left: 120px;
        .el-form-item__content {
          width: 400px;
        }
      }
    }
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 95%;
    margin-top: 20px;
    .el-card__header {
      padding: 20px 10px 5px 10px;
      border-bottom: 0;
      .clearfix {
        .clearfixText {
          border-left: 2px solid #1890ff;
          padding-left: 10px;
          font-weight: 700;
        }
      }
    }
  }
  .enterpriseBtn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    margin-top: 60px;
    margin-bottom: 60px;
    button {
      margin-left: 30px;
    }
  }
}
</style>
